<template>
  <el-button
    :icon="Plus"
    type="primary"
    @click="getSceneValue"
    style="margin-bottom: 10px"
    >添加SPU</el-button
  >
  <el-table :data="spuList" border style="margin: 20px 0">
    <el-table-column
      align="center"
      type="index"
      prop="date"
      label="序号"
      width="180"
    />
    <el-table-column prop="name" label="SPU名称" width="180" />
    <el-table-column prop="address" label="SPU描述" />
    <el-table-column prop="address" label="操作">
      <el-button
        size="small"
        title="添加SKU"
        type="primary"
        :icon="Plus"
      ></el-button>
      <el-button
        type="primary"
        size="small"
        title="修改SPU"
        :icon="Edit"
      ></el-button>
      <el-button
        type="info"
        size="small"
        title="查看SKU列表"
        :icon="InfoFilled"
      ></el-button>
      <el-button
        size="small"
        type="danger"
        title="删除SPU"
        :icon="Delete"
      ></el-button>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:currentPage="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[3, 6, 9, 12]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout=" prev, pager, next, jumper,->, sizes,total"
    :total="400"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts">
export default {
  name: "SpuList",
};
</script>

<script lang="ts" setup>
import { Delete, Edit, Plus, InfoFilled } from "@element-plus/icons-vue";
import { useCategoryListStore } from "@/stores/categoryList";
import { reqGetSpuListData } from "@/api/product/spu";
import { ref, watch, onMounted } from "vue";
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
//创建store对象
const categoryStore = useCategoryListStore();

// 与分页相关的变量
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const currentPage = ref<number>(1);
const pageSize = ref<number>(5);
const total = ref<number>(1);

const spuList = ref([]);

const emits = defineEmits(["changeValue"]);

// 1. 定义一个获取spu列表数据的函数 后期分页或是添加等都会用到
const getSpuListData = async () => {
  const result = await reqGetSpuListData(
    currentPage.value,
    pageSize.value,
    categoryStore.category3Id
  );
  // console.log('spu',result)
  spuList.value = result.records;
  total.value = result.total;
};

//监视三级导航是否变化
watch(
  () => categoryStore.category3Id,
  (category3Id) => {
    if (!category3Id) return;
    // 发送请求

    spuList.value = []; // 清空列表页
  }
);

// 分页器函数
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};

// 给按钮添加事件
function getSceneValue() {
  emits("changeValue", 2);
}
</script>

<style>
</style>